<script lang="ts">
export default {
  name: 'appcontrol'
};
</script>

<script setup lang="ts">

import {
  sendAppControl
} from '@/api/appcontrol';
import{getScreenList}from "@/api/screen"
import {
  closeLibraryOneClick,
  eggControlStatusUpdate,
  openLibraryOneClick,
  updateVoiceStatus
} from "@/api/server"

const ScreenList = ref([]);
const actionList = [
  {
    label: '图片',
    value: 'serverImage'
  },
  {
    label: '视频',
    value: 'serverVideo'
  },
  {
    label: 'PPT',
    value: 'serverPPT'
  }
]
let formData = {
  appId: -1,
  appSourceType: '',
  sourceId: "1",
  action: '',
  terminalType: "7",
  instructParams: {
    id: '',
    cmd:''
  }
}
//一键开馆
function openLibrary() {
  openLibraryOneClick({}).then((res: any) => {
    try {
      ElMessage.success(res.data.message);
    } catch (error) {
      ElMessage.error("调用失败！");
    }
  })
}
//一键闭馆
function closeLibrary() {
  closeLibraryOneClick({}).then((res: any) => {
    try {
      ElMessage.success(res.data.message);      
    } catch (error) {
      ElMessage.error("调用失败！");
    }
  })
}
//语音开关
function voiceSwitch() {
  updateVoiceStatus({}).then((res: any) => {
    try {
      ElMessage.success(res.data.message);
    } catch (error) {
      ElMessage.error("调用失败！");
    }
  })
}
  //脑电波开关    
  function eggSwitch() {            
    eggControlStatusUpdate({}).then((res: any) => {      
      try {
        ElMessage.success(res.data.message);
      } catch (error) {
        ElMessage.error("调用失败！");
      }
    })
  }
/**
 * 查询
 */
function handleQuery() {
  getScreenList({})
    .then((res: any) => {
      let data = res.data.data;
      console.log(data);
      ScreenList.value = data;
      console.log(ScreenList);
    })
}
function handleControl(cmd: string, appId: any, action: string) { 
  formData.action = action;
  formData.instructParams.cmd = cmd;
  formData.appId = appId
  sendAppControl(formData).then((res: any) => {
    try { 
      ElMessage.success(res.data.message);
    } catch (error) {
      ElMessage.error("调用失败！");
    }
  })
  // formData.sourceId = screenId;
  // switch (action) {
  //   case 'serverVideo':
  //     formData.appId = 2;

  //     break;
  //   case 'serverImage':
  //     formData.appId = 1;

  //     break;
  //   case 'serverPPT':
  //     formData.appId = 3;

  //     break;
  //   default:
  //     break;
  // }

  console.log(formData)
}
//选中视频、图片、PPT
let activeVideoBtn = ref('');
let activeImageBtn = ref('');
let activePptBtn = ref('');
function selectButton(obj: any, index: number, innerId: any,itemid: any) {
  formData.instructParams.id = innerId;
  formData.sourceId = innerId;
  switch (obj) {
    case 'video':
      formData.appSourceType = 2 +'';
      activeVideoBtn.value = "video"+index+itemid;
      break;
    case 'image':
      formData.appSourceType = 1 +'';
      activeImageBtn.value = "image"+index+itemid;
      break;
    case 'ppt':
      formData.appSourceType = 3 +'';
      activePptBtn.value = "ppt"+index+itemid;
      break;
    default:
      break;
  }
}

//切换页面
function tabClick(tab: any) {
  console.log(tab);
  formData.sourceId = "1";
  formData.appId = -1;
}

onMounted(async () => {

  handleQuery(); // 初始化数据
});




</script>

<template>
  <div class="app-container" >

    <div class="contant-box">
      <el-tabs  tab-position="left" @tab-click="tabClick">
        <el-tab-pane label="首页">
          <div class="mb5">
            <el-button class="big-button" @click="openLibrary">一键开馆</el-button>
            <el-button class="big-button" @click="closeLibrary">一键闭馆</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane  v-for="(item,index) in ScreenList" :key="index" :label="item.name||'未命名'" >

          <div class="mb-4" v-if="item.backDataByType &&item.backDataByType.length>0 ">
            <div :span="24" v-for="(video,index) in item.backDataByType" :key="video" >
              <div v-if="video.type=='2'" class="ctn-box">
                <div class="small-title">视频</div>
                <div class="sample-box">
                  <div  v-if="video.backData && video.backData.length>0" class="botton-box">
                      <el-button class="title-botton"  v-for="(btn,indexs) in video.backData" :key="btn" :class="{ active: activeVideoBtn == 'video'+indexs+item.id }" @click="selectButton('video',indexs,btn.innerId,item.id)">{{ btn.title }}
                      </el-button>
                  </div>
                  <el-button class="title-botton" type="primary" @click="handleControl('open',item.id,'serverVideo')">打开</el-button>
                  <el-button class="title-botton" type="primary" @click="handleControl('close',item.id,'serverVideo')">关闭</el-button>
                  <el-button class="title-botton" type="primary" @click="handleControl('resume',item.id,'serverVideo')">播放</el-button>
                  <el-button class="title-botton" type="primary" @click="handleControl('pause',item.id,'serverVideo')">暂停</el-button>
                  <el-button class="title-botton" type="primary" @click="handleControl('mute',item.id,'serverVideo')">静音</el-button>
                  <el-button class="title-botton" type="primary" @click="handleControl('unMute',item.id,'serverVideo')">取消静音</el-button>
                  <el-button class="title-botton" type="primary" @click="handleControl('speed',item.id,'serverVideo')">快进</el-button>
                  <el-button class="title-botton" type="primary" @click="handleControl('close',item.id,'serverVideo')">快退</el-button>
                </div>
              </div>
              <div v-if="video.type=='1'" class="ctn-box">
                <div class="small-title">图片</div>
                <div class="sample-box">
                <div  v-if="video.backData && video.backData.length>0" class="botton-box">
                  <el-button  class="title-botton"  v-for="(btn,indexs) in video.backData" :key="btn" :class="{ active: activeImageBtn == 'image'+indexs+item.id }"  @click="selectButton('image',indexs,btn.innerId,item.id)" >{{btn.title}}</el-button>
                </div>
                <el-button class="title-botton" type="primary" @click="handleControl('open',item.id,'serverImage')">打开</el-button>
                <el-button class="title-botton" type="primary" @click="handleControl('close',item.id,'serverImage')">关闭</el-button>
                <el-button class="title-botton" type="primary" @click="handleControl('prePage',item.id,'serverImage')">上一页</el-button>
                <el-button class="title-botton" type="primary" @click="handleControl('nextPage',item.id,'serverImage')">下一页</el-button>
                </div>
              </div>
              <div v-if="video.type=='3'" class="ctn-box">
            
                <div class="small-title">PPT</div>
                <div class="sample-box">
                <div  v-if="video.backData && video.backData.length>0" class="botton-box">
                  <el-button class="title-botton"  v-for="(btn,indexs) in video.backData" :key="btn" :class="{ active: activePptBtn == 'ppt'+indexs+item.id }"   @click="selectButton('ppt',indexs,btn.innerId,item.id)">{{btn.title}}</el-button>
                </div>
                <el-button class="title-botton" type="primary" @click="handleControl('open',item.id,'serverPPT')">打开</el-button>
                <el-button class="title-botton" type="primary" @click="handleControl('close',item.id,'serverPPT')">关闭</el-button>
                <el-button class="title-botton" type="primary" @click="handleControl('prePage',item.id,'serverPPT')">上一页</el-button>
                <el-button class="title-botton" type="primary" @click="handleControl('nextPage',item.id,'serverPPT')">下一页</el-button>
                </div>
              </div>
            </div>
          </div>


        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>
<style lang="scss" scoped>
.app-container {
  .contant-box {
    background-color: #fff;
    padding: 20px;
  }

  .el-row{
    background-color: #fff;
  }
  .small-title {
    font-size: 18px;
    color:#000;
    line-height:32px;
    display: inline-block;
    height: 32px;
    margin-top:-2px;
    position: relative;
    top:-2px;
    font-weight: 600;
    width: 160px;
  }
  .mb-4 {
    .data-box {
      background: white;
      height: 130px;
      display: flex;
      justify-content: space-between;
      padding: 20px;

      .data-box-info {
        .data-box-info-value {
          text-align: center;
        }

        .data-box-info-name {
          text-align: center;
        }

        .data-box-info-title {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 10px;
        }
      }
    }
  }
}
.active {
  color: #fff;
    background-color: #67c23a;
    border-color: #67c23a;
}
.ctn-box{
  padding:20px;
}
.botton-box{
  margin:20px 0;
}
.sample-box{
  padding-left:40px
}
.title-botton{
  min-width: 100px;
  height: 36px;
  line-height: 36px;
}
.big-button{
  width:200px;
  height:40px;
  line-height:40px;
  text-align:center;
  padding:40px;
  font-size:32px;
  color:#000;
  font-weight: 600;
  margin-left:30px;
}
.mb5{
  padding:50px 80px;
}
// /deep/.el-tabs__item {
// 	/* 修改为您想要的文字大小 */
//     font-size: 20px!important;
// }
// .el-tabs__item{
//   font-size: 20px !important;
//   font-weight: bold;
// }
</style>
<style>
 /deep/.el-tabs__item {
 	/* 修改为您想要的文字大小 */
     font-size: 20px!important;
 }
</style>